<script>
			var module_inits = [];
			
			function load_init_modules() {
				for (var i = 0; i < module_inits.length; i++) {
					module_inits[i]();
				}
			}
			
			function call_me(fun) {
				module_inits.push(fun);
			}
			onload = load_init_modules;
		</script>

		<script>
			var slider_images_url = [
			{volist name='pics' id='vo'}
			'{$vo.url}',
			{/volist}
			];
			var e_desc = '{$title}';
		</script>

<style type="text/css">

	@-webkit-keyframes lt_in
	{
		0%   {-webkit-transform: translate(-500px, -750px)}
		80%  {-webkit-transform: translate(40px, 40px)}
		100% {-webkit-transform: translate(0px, 0px)}
	}

	@-webkit-keyframes lb_in
	{
		0%   {-webkit-transform: translate(-500px, 750px)}
		80%  {-webkit-transform: translate(40px, -40px)}
		100% {-webkit-transform: translate(0px, 0px)}
	}

	@-webkit-keyframes zoom_in
	{
		0%   {-webkit-transform: scale(0, 0)}
		80%  {-webkit-transform: scale(1.2, 1.2)}
		100% {-webkit-transform: scale(1, 1);}
	}

	@-webkit-keyframes rb_out
	{
		0%   {-webkit-transform: translate(0px, 0px)}
		20%  {-webkit-transform: translate(-40px, -40px)}
		100% {-webkit-transform: translate(500px, 750px)}
	}

	@-webkit-keyframes rt_out
	{
		0%   {-webkit-transform: translate(0px, 0px)}
		20%  {-webkit-transform: translate(-40px, 40px)}
		100% {-webkit-transform: translate(500px, -750px)}
	}

	@-webkit-keyframes zoom_out
	{
		0%   {-webkit-transform: scale(1, 1)}
		20%  {-webkit-transform: scale(1.2, 1.2)}
		100% {-webkit-transform: scale(0, 0)}
	}

	@-webkit-keyframes mm1
	{
		0%   {-webkit-transform: translate(-50px, 0px)}
		100% {-webkit-transform: translate(0px, 0px)}
	}

	@-webkit-keyframes mm2
	{
		0%   {-webkit-transform: translate(0px, 0px)}
		100% {-webkit-transform: translate(-50px, 0px)}
	}

	@-webkit-keyframes mm3
	{
		0%   {-webkit-transform: translate(0px, 0px)}
		100% {-webkit-transform: translate(0px, -50px)}
	}

	@-webkit-keyframes mm4
	{
		0%   {-webkit-transform: translate(0px, -50px)}
		100% {-webkit-transform: translate(0px, 0px)}
	}

	@-webkit-keyframes mm5
	{
		0%   {-webkit-transform: translate(-50px, -50px)}
		100% {-webkit-transform: translate(0px, 0px)}
	}

	@-webkit-keyframes mm6
	{
		0%   {-webkit-transform: translate(0px, 0px)}
		100% {-webkit-transform: translate(-50px, -50px)}
	}

	@-webkit-keyframes mm7
	{
		0%   {-webkit-transform: translate(-50px, -50px)}
		100% {-webkit-transform: translate(0px, -100px)}
	}

	@-webkit-keyframes mm8
	{
		0%   {-webkit-transform: translate(-50px, -50px)}
		100% {-webkit-transform: translate(-100px, 0px)}
	}

	@-webkit-keyframes m1
	{
		0%   {-webkit-transform: translate(0px, 0px)}
		100% {-webkit-transform: translate(50px, 0px);}
	}

	@-webkit-keyframes m2
	{
		0%   {-webkit-transform: translate(0px, 0px)}
		100% {-webkit-transform: translate(-50px, 0px);}
	}

	@-webkit-keyframes m3
	{
		0%   {-webkit-transform: translate(0px, 0px)}
		100% {-webkit-transform: translate(0px, 50px);}
	}

	@-webkit-keyframes m4
	{
		0%   {-webkit-transform: translate(0px, 0px)}
		100% {-webkit-transform: translate(0px, -50px);}
	}

	@-webkit-keyframes m5
	{
		0%   {-webkit-transform: translate(0px, 0px)}
		100% {-webkit-transform: translate(50px, 50px);}
	}

	@-webkit-keyframes m6
	{
		0%   {-webkit-transform: translate(0px, 0px)}
		100% {-webkit-transform: translate(50px, -50px);}
	}

	@-webkit-keyframes m7
	{
		0%   {-webkit-transform: translate(0px, 0px)}
		100% {-webkit-transform: translate(-50px, 50px);}
	}

	@-webkit-keyframes m8
	{
		0%   {-webkit-transform: translate(0px, 0px)}
		100% {-webkit-transform: translate(-50px, -50px);}
	}

	body
	{
		margin: 0px;
		padding: 0px;
		background-color: black;
	}

	#container
	{
		position: absolute;
		left: 0px;
		top: 100px;
		width: 500px;
		height: 500px;
		background-color: black;
		overflow: hidden;
	}

	#cover
	{
		position: absolute;
		z-index: 0;
		overflow: hidden;
		margin: 0px;
		padding: 0px;
	}

	#coverimg
	{
		position: absolute;
		z-index: 0;
		margin: 0px;
		padding: 0px;
	}

</style>

<script>

var colors  = [
	'#A7DBD8','#F38630','#FF4E50','#E0E4CC','#69D2E7','#E0E4CC','#A7DBD8','#F38630','#FF4E50','#E0E4CC','#69D2E7','#E0E4CC',
	'#F39A7A','#FCF372','#FCE274','#D8E9BD','#FDE0C0','#CBDD71','#F39A7A','#FCF372','#FCE274','#D8E9BD','#FDE0C0','#CBDD71',
	'#D3E8D5','#D0DC30','#F0E907','#D1E5AA','#FBE6E5','#B7CE40','#D3E8D5','#D0DC30','#F0E907','#D1E5AA','#FBE6E5','#B7CE40'
];

var bubbles = [];

var show_in_ani  = ['lt_in', 'lb_in', 'zoom_in'];
var show_out_ani = ['rt_out', 'rb_out', 'zoom_out'];
var img_mov_ani  = ['mm1', 'mm2', 'mm3', 'mm4', 'mm5', 'mm6', 'mm7', 'mm8'];//['m1', 'm2', 'm3', 'm4', 'm5', 'm6', 'm7', 'm8'];
var show_images  = [];

var show_out_timer = 0;
var show_in_timer = 0;
var switch_img_timer = 0;
var curr_index = 0;
var ci = 0;
var started = false;
var resize_timer = 0;
var clean_bubble_ani_timer = 0;
var is_android = false;

function test_android()
{
    var u = navigator.userAgent;

    return u.indexOf('Android') > -1;
}

function reset_scene()
{
	var cover = document.getElementById('cover');
	cover.style.webkitTransition = '';
	cover.style.webkitAnimation = '';

	clearTimeout(show_out_timer);
	clearTimeout(show_in_timer);
	clearTimeout(switch_img_timer);
	clearTimeout(resize_timer);
	clearTimeout(clean_bubble_ani_timer);

	show_images  = [];
	show_out_timer = 0;
	show_in_timer = 0;
	switch_img_timer = 0;
	curr_index = 0;
	ci = 0;
	started = false;
	resize_timer = 0;
	clean_bubble_ani_timer = 0;

	start_up();
}

function create_bubble(r, x, y, z)
{
	var one = document.createElement('div');
	bubbles.push(one);
	one.style.position = 'absolute';
	one.style.borderRadius = '99em';
	one.style.opacity = 0.98;
	one.style.zIndex = z;

	one.style.backgroundColor = colors[ci];
	ci++;
	ci = ci % colors.length;
	one.style.left = Math.floor((x - r/2)) + 'px';
	one.style.top  = Math.floor((y - r/2)) + 'px';
	one.style.width = Math.floor(r) + 'px';
	one.style.height = Math.floor(r) + 'px';
	one.style.visibility = 'hidden';

	container.appendChild(one);
}

function bubble_init()
{
	for(var i=0; i<9; i++)
	{
		var x = i % 3;
		var y = Math.floor(i / 3);

		x = 166 * x + 30 + rand(0, 70);
		y = 166 * y + 30 + rand(0, 70); 

		console.log(x);
		create_bubble(230 + rand(0, 50), x, y, rand(100, 105));
	}

	for(var i=0; i<3; i++)
	{
		var x = 80 * rand(0, 6);
		var y = 80 * rand(0, 6);

		console.log(x);
		create_bubble(200, x, y, rand(106, 110));
	}
}

function rand(min, max)
{
	return min + Math.floor(Math.random()*(max-min+1));
}

function clean_bubble_ani()
{
	for(var i=0; i<bubbles.length; i++)
	{
		var wait = rand(0, 12) / 20;
		bubbles[i].style.visibility = 'hidden';
		bubbles[i].style.webkitAnimation = '';
		bubbles[i].style.webkitTransform = 'translate(0px, 0px) scale(1,1)';
		bubbles[i].style.backgroundColor = colors[ci];
		ci++;
		ci = ci % colors.length;
	}

	show_in_timer = setTimeout('show_in()', 1000);
}

function show_out()
{
	var out_ani = show_out_ani[rand(0, show_out_ani.length-1)];

	for(var i=0; i<bubbles.length; i++)
	{
		var wait = rand(0, 12) / 20;
		bubbles[i].style.webkitAnimation = out_ani + ' 0.7s ease-in-out '+wait+'s both'; 
	}

	clean_bubble_ani_timer = setTimeout('clean_bubble_ani()', 2000);
}


function resize_img(index)
{
	var cover = document.getElementById('cover');
	var coverimg = document.getElementById('coverimg');

	coverimg.src = slider_images_url[index];

	var w = show_images[index].width;
	var h = show_images[index].height;

	w = w * (600 / h);
	h = 600;

	if(w < 600)
	{
		h = h * (600 / w);
		w = 600;
	}

	cover.style.left = '-' + (w-500)/2 + 'px';
	cover.style.top  = '-' + (h-500)/2 + 'px';
	cover.style.width = w + 'px';
	cover.style.height = h + 'px';

	coverimg.style.left = '0px';
	coverimg.style.top  = '0px';
	coverimg.style.width = w + 'px';
	coverimg.style.height = h + 'px';

	// if(!is_android)
	// {
		var ani = img_mov_ani[rand(0, img_mov_ani.length-1)];
		cover.style.webkitAnimation = ani + ' 5s linear infinite alternate both';		
	// }
}

function switch_img()
{
	resize_timer = setTimeout('resize_img('+curr_index+')', 1);

	curr_index++;
	curr_index = curr_index % slider_images_url.length;
}


function show_in()
{
	var in_ani = show_in_ani[rand(0, show_in_ani.length-1)];

	for(var i=0; i<bubbles.length; i++)
	{
		var wait = rand(0, 12) / 20;
		bubbles[i].style.visibility = 'visible';
		bubbles[i].style.webkitAnimation = in_ani + ' 0.7s ease-in-out ' + wait + 's both'; 
	}

	show_out_timer = setTimeout("show_out()", 1500);
	switch_img_timer = setTimeout("switch_img()", 1300);
}

function on_image_load(event)
{
	if(show_images.length > 0 && show_images[0].complete && started == false)
	{
		started = true;
		switch_img();
		show_in_timer = setTimeout('show_in()', 2000);
	}
}

function load_images()
{
	for(var i=0; i<slider_images_url.length; i++)
	{
		var img = new Image();
		img.onload = on_image_load;
		img.index  = i;
		img.src = slider_images_url[i];
		show_images.push(img);
	}
}

function start_up()
{
	is_android = test_android();

	bubble_init();
	load_images();	
}

call_me(start_up);

</script>

<div id="container">
	<div id="cover" style="left: -50px; top: -150px; width: 600px; height: 800px; animation: mm2 5s linear infinite alternate both;">
		<img id="coverimg" src="__DIR__{$dir}/img/" style="left: 0px; top: 0px; width: 600px; height: 800px;">
	</div>
<div style="position: absolute; border-radius: 99em; opacity: 0.98; z-index: 104; left: -43px; top: -61px; width: 244px; height: 244px; visibility: hidden; transform: translate(0px, 0px) scale(1, 1); background-color: rgb(243, 154, 122);"></div><div style="position: absolute; border-radius: 99em; opacity: 0.98; z-index: 104; left: 95px; top: -84px; width: 258px; height: 258px; visibility: hidden; transform: translate(0px, 0px) scale(1, 1); background-color: rgb(252, 243, 114);"></div><div style="position: absolute; border-radius: 99em; opacity: 0.98; z-index: 104; left: 226px; top: -75px; width: 274px; height: 274px; visibility: hidden; transform: translate(0px, 0px) scale(1, 1); background-color: rgb(252, 226, 116);"></div><div style="position: absolute; border-radius: 99em; opacity: 0.98; z-index: 105; left: -72px; top: 80px; width: 244px; height: 244px; visibility: hidden; transform: translate(0px, 0px) scale(1, 1); background-color: rgb(216, 233, 189);"></div><div style="position: absolute; border-radius: 99em; opacity: 0.98; z-index: 100; left: 68px; top: 76px; width: 266px; height: 266px; visibility: hidden; transform: translate(0px, 0px) scale(1, 1); background-color: rgb(253, 224, 192);"></div><div style="position: absolute; border-radius: 99em; opacity: 0.98; z-index: 103; left: 243px; top: 120px; width: 271px; height: 271px; visibility: hidden; transform: translate(0px, 0px) scale(1, 1); background-color: rgb(203, 221, 113);"></div><div style="position: absolute; border-radius: 99em; opacity: 0.98; z-index: 105; left: -29px; top: 291px; width: 248px; height: 248px; visibility: hidden; transform: translate(0px, 0px) scale(1, 1); background-color: rgb(243, 154, 122);"></div><div style="position: absolute; border-radius: 99em; opacity: 0.98; z-index: 100; left: 68px; top: 250px; width: 255px; height: 255px; visibility: hidden; transform: translate(0px, 0px) scale(1, 1); background-color: rgb(252, 243, 114);"></div><div style="position: absolute; border-radius: 99em; opacity: 0.98; z-index: 105; left: 276px; top: 241px; width: 276px; height: 276px; visibility: hidden; transform: translate(0px, 0px) scale(1, 1); background-color: rgb(252, 226, 116);"></div><div style="position: absolute; border-radius: 99em; opacity: 0.98; z-index: 106; left: 220px; top: 300px; width: 200px; height: 200px; visibility: hidden; transform: translate(0px, 0px) scale(1, 1); background-color: rgb(216, 233, 189);"></div><div style="position: absolute; border-radius: 99em; opacity: 0.98; z-index: 109; left: 220px; top: -20px; width: 200px; height: 200px; visibility: hidden; transform: translate(0px, 0px) scale(1, 1); background-color: rgb(253, 224, 192);"></div><div style="position: absolute; border-radius: 99em; opacity: 0.98; z-index: 109; left: -20px; top: -20px; width: 200px; height: 200px; visibility: hidden; transform: translate(0px, 0px) scale(1, 1); background-color: rgb(203, 221, 113);"></div></div>



	<link type="text/css" rel="stylesheet" href="__DIR__{$dir}/css/guanzhu.css">
	<link rel="stylesheet" type="text/css" href="__DIR__{$dir}/css/buttons.css">

	<style type="text/css">
		@-webkit-keyframes zhuan
		{
			0%
			{
				-webkit-transform:rotate(0deg);
			}

			100%
			{
				-webkit-transform:rotate(360deg);
			}
		}


		@-webkit-keyframes aa_out_bounce_left
		{
		    0%{
		        -webkit-transform:translateX(0)
		    }
		    20%{
		        -webkit-transform:translateX(20px)
		    }
		    100%{
		        -webkit-transform:translateX(-125px)
		    }
		}
		@-webkit-keyframes aa_in_bounce_center
		{
		    0%{
		        opacity:0;
		        -webkit-transform:scale(.3)
		    }
		    50%{
		        opacity:1;
		        -webkit-transform:scale(1.05)
		    }
		    70%{
		        -webkit-transform:scale(.9)
		    }
		    100%{
		        -webkit-transform:scale(1)
		    }
		}
		@-webkit-keyframes jinbi
		{
			from {-webkit-transform: rotateY(0deg);}
			to   {-webkit-transform: rotateY(180deg);}
		}
		.jubao-item
		{
			position: relative;
			float: left;
			width: 360px;
			height: 55px;
			top: 0px;
			font-size: 20px;
			line-height: 55px;
			margin-left: 20px;
			border-bottom: 1px solid #EBEBEB;
		}
		.jubao-radio
		{
			position: absolute;
			right: 10px;
			width: 25px;
			height: 25px;
			top: 20px;
		}

		.jubao-detail
		{
			position: relative;
			float: left;
			width: 360px;
			margin-left: 20px;
		}
		.jubao-detail textarea
		{
			width: 360px;
		    height: 80px;
		    font-size: 20px;
		    resize: none;
		    line-height: 40px;
		    border: none;
		    background-color: #eee;
		    border-radius: 10px;
		    padding-left: 10px;
		}
		@-webkit-keyframes guangzhu_ani
		{
			from  {-webkit-transform: scale(1);}
			to    {-webkit-transform: scale(1.05);}
		}
		@-webkit-keyframes che_ani
		{
		    0%    {-webkit-transform: translate(-20px,0px);opacity: 1}
		    8%  {-webkit-transform: translate(100px,0px) scale(0.95,1.05);opacity: 1}
		    10%  {-webkit-transform: translate(100px,0px) scale(1,1);opacity: 1}
		    12%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    14%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    16%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    18%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    20%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    45%   {-webkit-transform: translate(100px,0px) scale(0.97,1.03); opacity: 1}
		    50%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    60%   {-webkit-transform: translate(200px,0px); opacity: 0}
		    100%  {-webkit-transform: translate(200px,0px); opacity: 0}
		}
		@-webkit-keyframes che1_ani
		{
		    0%    {opacity: 1}
		    12%   {opacity: 1}
		    14%   {opacity: 0.5}
		    16%   {opacity: 1}
		    18%   {opacity: 0.5}
		    20%   {opacity: 1}
		    100%  {opacity: 1}

		}
		@-webkit-keyframes baoming
		{
		    0%  {opacity: 0}
		    58% {opacity: 0;-webkit-transform: scale(1.4);}
		    59% {opacity: 1;-webkit-transform: scale(1.4);}
		    70% {opacity: 1;-webkit-transform: scale(0.95);}
		    72% {opacity: 1;-webkit-transform: scale(1);}
		    80% {opacity: 0.8;-webkit-transform: scale(1.1);}
		    88% {opacity: 1;-webkit-transform: scale(1);}
		    93% {opacity: 0;-webkit-transform: scale(1.3);}
		    100%{opacity: 0}
		}
		@-webkit-keyframes shijia
		{
		    0%  {-webkit-transform: rotate(20deg) scale(0.8);opacity: 0}
		    10% {-webkit-transform: rotate(20deg) scale(0.75);opacity: 1}
		    20% {-webkit-transform: rotate(20deg) scale(0.85);}
		    28% {-webkit-transform: rotate(20deg) scale(0.75);}
		    38% {-webkit-transform: rotate(20deg) scale(0.85);}
		    47% {-webkit-transform: rotate(20deg) scale(0.75);opacity: 1}
		    55% {-webkit-transform: rotate(20deg) scale(0.90);opacity: 0}
		    100%{opacity: 0}

		}
		@-webkit-keyframes biaozhi_ani
		{
		    0%  {opacity: 0}
		    10% {opacity: 0}
		    20% {opacity: 1}
		    45% {opacity: 1}
		    55% {opacity: 0}
		    100%{opacity: 0}
		}
		#musicinfo
		{
			color: #fff;
			text-shadow: 1px 1px 2px #000;
			font-size: 15px;
			position: fixed;
			left: 432px;
		    top: 82px;
		    width: 60px;
		    height: 20px;
		    z-index: 100;
		    display: none;
		    opacity: 1;
		}
		@-webkit-keyframes heart_beating
		{
			from {opacity: 1;-webkit-transform: scale(1);}
			to   {opacity: 0.8;-webkit-transform: scale(0.8);}
		}
		@-webkit-keyframes heart1_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(-20px,-50px) scale(1.5);}
		}
		@-webkit-keyframes heart2_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(20px,-60px) scale(2);}
		}
		@-webkit-keyframes heart3_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(70px,-40px) scale(2);}
		}
#enddiv
{
    position: absolute;
    width: 500px;
    height: 815px;
    background-color: rgba(0,0,0,0.7);
    z-index: 10000;
    display: none;
    opacity: 0;
}
#title_div
{
    width: 320px;
    height: 200px;
    left: 90px;
    top: 250px;
    color: #fff;
    font-size: 25px;
    position: relative;
    line-height: 45px;
    text-align: center;
    font-family: '微软雅黑';
    display:table;
}
#title_line
{
    position: absolute;
    width: 370px;
    height: 2px;
    background-color: #fff;
    top: 415px;
    left: 65px;
}
#reshowbtn
{
    position: absolute;
    width: 150px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(94,159,177,0.9);
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 44px;
    top: 446px;
    left: 74px;
}
#guanzhubtn
{
    position: absolute;
    width: 150px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(185,91,83,0.9);
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 44px;
    top: 446px;
    left: 268px;
}
@-webkit-keyframes fadein
{
	from  {opacity: 0}
	to    {opacity: 1}
}
	</style>

	

	
	
	
	
	
	
	